<template>
  <div>
    <div class="page_title">国家计量数据建设应用基地</div>
    <FormTable
      :formRules="formRules"
      :tableData="tableData"
      :columns="columns"
      :total="total"
      :currentPage="pageIndex"
      :pageSize="pageSize"
      @changeTableData="changeTableData"
      @queryTable="queryTable"
    >
      <template #tableTabs>
        <div style="display: flex; justify-content: end; margin-bottom: 16px">
          <el-button type="primary" @click="edit1()">新增</el-button>
        </div>
      </template>
      <template #operator="{ slotProps }" class="table_button_list">
        <span class="table_button" @click="detail(slotProps)">查看</span>
        <span
          class="table_button"
          style="margin-left: 10px"
          @click="edit2(slotProps)"
          >修改</span
        >
        <span
          class="table_button"
          style="margin-left: 10px"
          @click="del(slotProps)"
          >删除</span
        >
      </template>
    </FormTable>
    <formWin
      :dataType="dataType"
      :dataContext="dataContext"
      v-model="dialogVisible"
      :dataForm="dialogForm"
      v-if="dialogVisible"
      @close="dialogVisible = false"
      :isDetail="isDetail"
      @getDatas="queryTable()"
    />
  </div>
</template>
<script>
import FormTable from "@/components/FormTable/index.vue";
import formWin from "./formWin.vue";
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { getQualityMapInfoByPage, delQualityMapInfo } from "@/api/api";
import { ElMessage, ElMessageBox } from "element-plus";

export default defineComponent({
  name: "",
  components: { FormTable, formWin },
  setup() {
    const dataMap = reactive({
      tableData: [],
      formRules: [
        {
          type: "input",
          field: "name",
          title: "名称",
          value: "",
        },
        {
          type: "input",
          field: "nameConstructionUnit",
          title: "承建单位名称",
          value: "",
        },
        // {
        //   type: "input",
        //   field: "constructionStatus",
        //   title: "筹建状态",
        //   value: "",
        // },
      ],
      searchForm: {
        areaName: "",
        enterpriseName: "",
        awardName: "",
      },
      columns: [
        {
          label: "序号",
          type: "index",
          width: "70px",
        },
        {
          label: "名称",
          prop: "name",
        },
        {
          label: "承建单位名称",
          prop: "nameConstructionUnit",
        },
        // {
        //   label: "筹建状态",
        //   prop: "constructionStatus",
        // },
        {
          label: "创建时间",
          prop: "createTime",
          align: "center",
          width: "160px",
        },
        {
          prop: "operator",
          label: "操作",
          align: "center",
          width: "120px",
        },
      ],
      dataType: "05",
      dataContext: "{}",
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      isDetail: false,
      dialogForm: {},
    });
    const methodsMap = reactive({
      detail(items) {
        dataMap.dialogForm = items;
        dataMap.isDetail = true;
        dataMap.dialogVisible = true;
      },
      edit2(items) {
        dataMap.dialogForm = items;
        dataMap.isDetail = false;
        dataMap.dialogVisible = true;
      },
      edit1(items) {
        if (items) {
          dataMap.dialogForm = items;
        } else {
          dataMap.dialogForm = {
            companyIntroduction: "",
          };
        }
        dataMap.isDetail = false;
        dataMap.dialogVisible = true;
      },
      changeTableData(pageNum, pageSize) {
        dataMap.pageIndex = pageNum;
        dataMap.pageSize = pageSize;
        methodsMap.getDatas();
      },
      del(items) {
        ElMessageBox.confirm("是否删除此数据", "删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delQualityMapInfo({
              dataType: dataMap.dataType,
              dataContext: dataMap.dataContext,
              id: items.id,
            })
              .then(() => {
                ElMessage({
                  type: "success",
                  message: "删除成功",
                });
              })
              .then(() => {
                setTimeout(() => {
                  methodsMap.getDatas();
                }, 1000);
              });
          })
          .catch(() => {});
      },
      getDatas() {
        console.log("开始调用列表", Date.now());
        getQualityMapInfoByPage({
          name: dataMap.searchForm.name,
          nameConstructionUnit: dataMap.searchForm.nameConstructionUnit,
          constructionStatus: dataMap.searchForm.constructionStatus,
          pageValue: {
            pageIndex: dataMap.pageIndex,
            pageSize: dataMap.pageSize,
          },
          dataType: dataMap.dataType,
          // dataContext: dataMap.dataContext,
        }).then((res) => {
          console.log("列表调用结束", Date.now());
          console.log("列表数量", res.data.total);
          dataMap.tableData = res.data.records;
          dataMap.total = res.data.total;
        });
      },
      queryTable(params) {
        dataMap.searchForm = params || {};
        dataMap.pageIndex = 1;
        methodsMap.getDatas();
      },
    });
    onMounted(() => {
      methodsMap.getDatas();
    });
    return {
      ...toRefs(dataMap),
      ...toRefs(methodsMap),
    };
  },
});
</script>
<style lang="scss" scoped></style>
